import { useContext, useState } from "react";
import { Link } from "react-router-dom";
import { AuthContext } from "@/contexts/authContext";
import { useTheme } from "@/hooks/useTheme";
import { toast } from "sonner";

const Navbar = () => {
  const { isAuthenticated, logout } = useContext(AuthContext);
  const { theme, toggleTheme } = useTheme();
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);

  // Mock用户数据
  const mockUserInfo = {
    id: "user123",
    username: "创意达人",
    avatar: "https://space.coze.cn/api/coze_space/gen_image?image_size=square&prompt=user%20avatar%20profile%20picture&sign=a47ca4238b884af3e5f2e2dfbbcc7eb9",
    email: "user@example.com"
  };

  const handleLogout = () => {
    logout();
    toast.success("已成功登出");
  };

  return (
    <nav className={`sticky top-0 z-50 ${theme === 'dark' ? 'glass-effect-dark' : 'glass-effect'}`}>
      <div className="container mx-auto px-4 md:px-8">
        <div className="flex items-center justify-between h-16 md:h-20">
          {/* Logo */}
          <Link to="/" className="flex items-center space-x-2">
            <div className="bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 p-1.5 rounded-lg">
              <i className="fa-solid fa-video text-white text-xl"></i>
            </div>
            <span className="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500">
              AI视频创作
            </span>
          </Link>

          {/* 桌面端导航 */}
          <div className="hidden md:flex items-center space-x-8">
            <Link to="/" className="font-medium hover:text-indigo-500 transition-colors">首页</Link>
            <Link to="/dashboard" className="font-medium hover:text-indigo-500 transition-colors">画廊</Link>
            <Link to="/my-projects" className="font-medium hover:text-indigo-500 transition-colors">我的项目</Link>
            <button 
              onClick={toggleTheme}
              className={`p-2 rounded-full ${theme === 'dark' ? 'bg-slate-800 text-yellow-300' : 'bg-slate-100 text-slate-700'}`}
              aria-label="切换主题"
            >
              <i className={`fa-solid ${theme === 'dark' ? 'fa-sun' : 'fa-moon'}`}></i>
            </button>
          </div>

          {/* 用户区域 */}
          <div className="hidden md:flex items-center space-x-4">
            {isAuthenticated ? (
              <div className="flex items-center space-x-3">
                <div className="relative">
                  <img 
                    src={mockUserInfo.avatar} 
                    alt={mockUserInfo.username} 
                    className="w-9 h-9 rounded-full border-2 border-indigo-500"
                  />
                  <span className="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-white"></span>
                </div>
                <span className="font-medium">{mockUserInfo.username}</span>
                <button 
                  onClick={handleLogout}
                  className="p-1.5 text-slate-400 hover:text-red-500 transition-colors"
                  aria-label="登出"
                >
                  <i className="fa-solid fa-right-from-bracket"></i>
                </button>
              </div>
            ) : (
              <button className="px-4 py-2 rounded-full bg-indigo-600 hover:bg-indigo-700 text-white font-medium transition-colors">
                登录 / 注册
              </button>
            )}
          </div>

          {/* 移动端菜单按钮 */}
          <button 
            className="md:hidden p-2 rounded-lg focus:outline-none"
            onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
            aria-label="菜单"
          >
            <i className={`fa-solid ${isMobileMenuOpen ? 'fa-times' : 'fa-bars'} text-xl`}></i>
          </button>
        </div>
      </div>

      {/* 移动端菜单 */}
      {isMobileMenuOpen && (
        <div className={`md:hidden ${theme === 'dark' ? 'bg-slate-800' : 'bg-white'} shadow-lg rounded-b-xl`}>
          <div className="px-4 py-3 space-y-3">
            <Link to="/" className="block py-2 font-medium hover:text-indigo-500 transition-colors" onClick={() => setIsMobileMenuOpen(false)}>首页</Link>
            <Link to="/dashboard" className="block py-2 font-medium hover:text-indigo-500 transition-colors" onClick={() => setIsMobileMenuOpen(false)}>画廊</Link>
            <Link to="/my-projects" className="block py-2 font-medium hover:text-indigo-500 transition-colors" onClick={() => setIsMobileMenuOpen(false)}>我的项目</Link>
            <div className="flex items-center justify-between py-2">
              <span className="font-medium">深色模式</span>
              <button 
                onClick={toggleTheme}
                className={`p-2 rounded-full ${theme === 'dark' ? 'bg-slate-700 text-yellow-300' : 'bg-slate-100 text-slate-700'}`}
              >
                <i className={`fa-solid ${theme === 'dark' ? 'fa-sun' : 'fa-moon'}`}></i>
              </button>
            </div>
            {isAuthenticated ? (
              <div className="flex items-center justify-between py-2">
                <div className="flex items-center space-x-3">
                  <img 
                    src={mockUserInfo.avatar} 
                    alt={mockUserInfo.username} 
                    className="w-8 h-8 rounded-full"
                  />
                  <span className="font-medium">{mockUserInfo.username}</span>
                </div>
                <button 
                  onClick={handleLogout}
                  className="text-red-500 hover:text-red-600 transition-colors"
                >
                  登出
                </button>
              </div>
            ) : (
              <button className="w-full py-2 rounded-full bg-indigo-600 hover:bg-indigo-700 text-white font-medium transition-colors">
                登录 / 注册
              </button>
            )}
          </div>
        </div>
      )}
    </nav>
  );
};

export default Navbar;